<template>
  <div class="main">
    <h1>注册</h1>
    <!-- 实现文件上传的原理 -->
    <!-- 在页面放置一个隐藏的file标签，太丑了，我们自己放一张图片，点击图片触发changeImg方法， -->
    <!-- input的change事件表示文件选择之后触发的方法change是输入框的内容改变事件，对于
    type="file"的input就是选择好文件之后输入框改变 -->
    <input type="file" style="display:none" ref="file" @change="fileSelected" />
    <ul>
      <li>
        <img :src="imgUrl" @click="changeImg" />
      </li>
      <li>
        <input type="text" placeholder="请输入用户名" v-model="username" />
      </li>
      <li>
        <input type="password" placeholder="请输入密码" v-model="password" />
      </li>
      <li>
        <input
          type="password"
          placeholder="请再次输入密码"
          v-model="respassword"
        />
      </li>
      <li>
        <input type="text" placeholder="请输入昵称" v-model="myname" />
      </li>
      <li>
        <button @click="sign">注册</button>
      </li>
      <li>
        <router-link :to="{ name: 'login' }">已有账号，我要登录！</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
// 由于在../utils/request中将instance(创建的的axios实例)作为默认导出，所以这里的request相当于instance实例，相当于直接发起axios请求
import request from '../utils/request'
import { serveUrl } from '../utils/config'
import { reg } from '../services/user'
import { setToken } from '../utils/auth'
export default {
  data() {
    return {
      username: '',
      password: '',
      respassword: '',
      imgUrl: require('../assets/upload.png'),
      myname: '', // 昵称
      avatar: '' // 头像
    }
  },
  methods: {
    changeImg() {
      // 点击图片执行changeImg方法，获取页面中设置了ref属性的标签触发它的点击事件，弹出上传文件的输入框
      this.$refs.file.click()
    },
    // change事件对象中的e.target里有一个files属性存贮有当前我们选择好要上传的图片，我们获取后将该图上传到服务器即可
    async fileSelected(e) {
      // console.log(e)
      //     以前，浏览器与服务器的post通讯是通过表单进行提交的，通过form表单提交的数据，默认便是formData的格式
      //     H5 FormData对象就模拟一个原始的表单格式的数据，以前上传文件非得要用个form包起来，就是和后台约定的一个传输数据格式，
      //     FormData.append()
      // 向 FormData 中添加新的属性值，如果FormData 对应的属性值存在则覆盖原值，否则新增一项属性值
      const formdata = new FormData()
      // 向 FormData 中添加属性file其值为事件对象中拿到的绑定事件的标签下的索引为0的图片文件
      formdata.append('file', e.currentTarget.files[0])
      // 发送请求上传图片request.post是引入的request对象中的post方法
      const res = await request.post('/api/v1/common/file_upload', formdata, {
        headers: {
          // axios请求默认content-type数据类型是json
          // jquery请求传参时默认参数数据类型url
          // 发送请求时注意一定要设置请求头中的content-type,告诉服务器我这是文件上传
          'Content-Type': 'multipart/form-data'
        }
      })
      // console.log(res)
      //   code: "success"
      //   info: "/uploads/20200718/1595059371425.jpg"
      //   message: "文件上传成功"
      // 发送请求上传成功后台返回一个图片地址，拼上后台的基地址就可以拿到用户刚刚上传的图片渲染页面了

      // this.imgUrl = 'http://localhost:3009' + res.info
      // 用42行的serveUrl,取的是配置文件untils下的config(里边写的是后台的基地址)目的：后台地址改变时。只需要改那个文件就行了
      this.avatar = res.info
      this.imgUrl = serveUrl + res.info
    },
    async sign() {
      if (this.myname === '' || this.password === '' || this.avatar === '') {
        alert('请输入注册信息')
        return
      }
      if (this.password !== this.respassword) {
        alert('两次输入的密码不一致')
        return
      }
      const res = await reg({
        userName: this.username,
        password: this.password,
        nickName: this.myname,
        avatar: this.avatar
      })
      console.log(res)
      // {code: "success", token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiO…gwNX0.19wyEfkE_UToGDUvevZXI0SPKBJ6BJQxDPhwAAlr23o"}
      if (res.code === 'success') {
        // 如果后台返回注册成功将token存起来
        setToken(res.token)
        // 页面跳转到首页
        this.$router.push({
          name: 'Home'
        })
      } else {
        // 如果注册不成功，返回失败信息
        alert(res.message)
      }
    }
  }
}
</script>

<style>
.main {
  display: flex;
  flex-direction: column;
  align-items: center;
}
img {
  display: block;
  margin: 0 auto;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.main h1 {
  margin: 3.5rem 0 1rem;
}
ul li:nth-of-type(5) a {
  margin-left: 1rem;
}
button {
  margin-left: 1.8rem;
}
</style>
